<template>
	<view class="container">
		<view class="error" v-if="Info.State==3">审核失败{{Info.Reason==''?'':'，'+Info.Reason}}</view>
		<view class="square" v-if="Info.State==0 || Info.State==2 || Info.State==3">
			<form @submit="formSubmit">
				<view class="head border-b">
					<view class="title red">上传头像</view>					
					<view class="upload" @click="ChooseHeadImg()"><image src="/static/uphead.png" v-if="Info.HeadImg.indexOf('headimg.png')>-1" /><image :src="Tools.GetImg(Info.HeadImg,200)" v-else mode="aspectFill"/></view>
					<view class="tip">请上传您的真实头像~</view>
				</view>
				<view class="cu-form-group border-b">
					<view class="title red">昵称</view>
					<input name="NickName" placeholder="请输入昵称" :value="Info.NickName"></input>
				</view>
				<view class="cu-form-group border-b">
					<view class="title red">性别</view> 
					<picker @change="SexChange" :value="Tools.findStringIndex(SexList,Info.Sex)" :range="SexList">
						<view class="uni-input" style="height: 60rpx; line-height: 60rpx;">
							{{SexList[Tools.findStringIndex(SexList,Info.Sex)]}}<input name="Sex" type="text" class="hidden" :value="Info.Sex"/>
						</view>
					</picker>
					<view class="arrow"></view>
				</view>
				<view class="cu-form-group border-b">
					<view class="title red">手机号码</view>
					<input name="Mobile" type="number" placeholder="请输入手机号码" :value="Info.Mobile" maxlength="11"></input>
				</view>
				<view class="cu-form-group border-b">
					<view class="title red">微信号</view>
					<input name="WeiXin" placeholder="请输入微信号" :value="Info.WeiXin"></input>
				</view>
				
				<view class="card border-b">
					<view class="title red">上传身份证</view>
					<view class="idcard" @click="ChooseIDCardA()">
						<image v-if="Info.IDCardA==''" src="http://download.qiyedaishu.com/common/zheng.png" />
						<image v-else :src="Info.IDCardA" mode="aspectFill"/>
					</view>
					<view class="idcard" @click="ChooseIDCardB()">
						<image v-if="Info.IDCardB==''" src="http://download.qiyedaishu.com/common/fan.png" />
						<image v-else :src="Info.IDCardB" mode="aspectFill"/>
					</view>
				</view>
				<view class="cu-form-group border-b">
					<view class="title red">姓名</view>
					<input name="RealName" placeholder="上传完身份证后自动识别" :value="Info.RealName" disabled="disabled"></input>
				</view>
				<view class="cu-form-group border-b">
					<view class="title red">身份证号</view>
					<input name="IDCard" type="idcard" placeholder="上传完身份证后自动识别" :value="Info.IDCard" maxlength="18" disabled="disabled"></input>
				</view>
				<view class="cu-form-group border-b">
					<view class="title red">出生日期</view>
					<picker name="Birthday" mode="date" :value="Tools.toDate(Info.Birthday,'上传完身份证后自动识别')" @change="BirthdayChange" disabled="disabled">
						<view class="uni-input">{{Tools.toDate(Info.Birthday,'上传完身份证后自动识别')}}</view><input name="Birthday" type="text" class="hidden" :value="Info.Birthday"/>
					</picker>
				</view>
				<view class="cu-form-group border-b">
					<view class="title">最高学历</view>
					<picker @change="EducationChange" :value="Tools.findStringIndex(EducationList,Info.Education)" :range="EducationList">
						<view class="uni-input">
							{{EducationList[Tools.findStringIndex(EducationList,Info.Education)]}}<input name="Education" type="text" class="hidden" :value="Info.Education"/>
						</view>
					</picker>
					<view class="arrow"></view>
				</view>	
				<view class="cu-form-group border-b">
					<view class="title">原工作单位</view>
					<input name="WorkUnit" placeholder="请输入原工作单位" :value="Info.WorkUnit"></input>
				</view>
				<view class="cu-form-group border-b">
					<view class="title">职务/职称</view>
					<input name="Position" placeholder="请输入职务/职称" :value="Info.Position"></input>
				</view>
				<view class="cu-form-group border-b">
					<view class="title red">是否可接异地线上相亲</view>
					<picker @change="RIsOnlineChange" :value="Tools.findTableIndex(RIsOnlineList,Info.RIsOnline)" :range="RIsOnlineList" range-key="Name">
						<view class="uni-input">
							{{RIsOnlineList[Tools.findTableIndex(RIsOnlineList,Info.RIsOnline)].Name}}<input name="RIsOnline" type="text" class="hidden" :value="Info.RIsOnline"/>
						</view>
					</picker>
					<view class="arrow"></view>
				</view>				
				<view class="cu-form-group border-b">
					<view class="title red">所在地区</view>
					<view class="text-r">
						<uni-citypicker v-if="Show" @change="RLivePlaceChange" placeholder="请选择" :type="3" :provinceid="Info.RLivePlaceProvinceID" :cityid="Info.RLivePlaceCityID" :areaid="Info.RLivePlaceAreaID"></uni-citypicker>
						<input name="RLivePlaceProvinceID" type="text" class="hidden" :value="Info.RLivePlaceProvinceID"/>
						<input name="RLivePlaceCityID" type="text" class="hidden" :value="Info.RLivePlaceCityID"/>
						<input name="RLivePlaceAreaID" type="text" class="hidden" :value="Info.RLivePlaceAreaID"/>
						<input name="RLat" type="text" class="hidden" :value="Info.RLat"/>
						<input name="RLng" type="text" class="hidden" :value="Info.RLng"/>			
						<input name="RLivePlace" type="text" class="hidden" :value="Info.RLivePlace"/>
						<input name="RLiveName" type="text" class="hidden" :value="Info.RLiveName"/>
						<input name="RLiveAddress" type="text" class="hidden" :value="Info.RLiveAddress"/>						
					</view>
					<view class="arrow"></view>
				</view>
				<view class="cu-form-group border-b" @click="OpenAddress">
					<view class="text-r">{{Info.RLiveName==''?'详细地址':Info.RLiveName+'（'+Info.RLiveAddress+'）'}}</view>
					<view class="arrow"></view>
				</view>
				<view class="cu-form-group border-b">
					<view class="title">紧急联系人</view>
					<input name="RContactName" placeholder="请输入紧急联系人" :value="Info.RContactName"></input>
				</view>
				<view class="cu-form-group border-b">
					<view class="title">紧急联系人电话</view>
					<input name="RContactMobile" placeholder="请输入紧急联系人电话" :value="Info.RContactMobile"></input>
				</view>
				<view class="cu-form-group border-b">
					<view class="title">是否是党员</view> 
					<picker @change="RPartyChange" :value="Tools.findStringIndex(RPartyList,Info.RParty)" :range="RPartyList">
						<view class="uni-input" style="height: 60rpx; line-height: 60rpx;">
							{{RPartyList[Tools.findStringIndex(RPartyList,Info.RParty)]}}<input name="RParty" type="text" class="hidden" :value="Info.RParty"/>
						</view>
					</picker>
					<view class="arrow"></view>
				</view>				
				<view class="cu-form-group">
					<view class="title">个人荣誉</view>
				</view>
				<view class="brief border-b">
					<textarea name="RHonor" placeholder="请输入个人荣誉" :value="Info.RHonor"></textarea>
				</view>
				<view class="cu-form-group">
					<view class="title">个人特长</view>
				</view>
				<view class="brief">
					<textarea name="RTalent" placeholder="请输入个人特长" :value="Info.RTalent"></textarea>
				</view>
				<view class="cu-form-group">
					<view class="title">志愿宣言</view>
				</view>
				<view class="brief">
					<textarea name="RDeclaration" placeholder="请输入志愿宣言" :value="Info.RDeclaration"></textarea>
				</view>
				<view class="cu-form-group"> 
					<view class="title">个人简介</view>
				</view>
				<view class="brief">
					<textarea name="RBrief" placeholder="请输入个人简介" :value="Info.RBrief"></textarea>
				</view>
				<button class="publish" form-type="submit">{{Flag=="apply"?"提交申请":"确定修改"}}</button>
			</form>
		</view>
		<view class="success" v-if="Info.State==1">
			<view class="headimg"><image src="/static/success.png" mode="aspectFill"/></view>
			<view class="line">申请成功，请耐心等待审核</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				Flag:'',
				Show:false,
				Info:{},
				SexList:['请选择','男','女'],
				RPartyList:['请选择','是党员','非党员'],
				EducationList:['请选择'],
				RIsOnlineList:[{ID:-1,Name:'请选择'},{ID:0,Name:'不接异地线上'},{ID:1,Name:'可接异地线上'}],
			};
		},
		onShow() {
			uni.$once("Cover",Path=>{
				this.Info.HeadImg=Path;
			});
		},
		onLoad(options) {
			this.Flag=options.Flag;
			if(this.Flag=="apply"){
				uni.setNavigationBarTitle({title:'申请红娘'});
			}else{
				uni.setNavigationBarTitle({title:'修改资料'});
			}
			this.Find_UserDetail();
		},
		methods:{
			SexChange(e){
				this.Info.Sex=this.SexList[e.detail.value];
			},
			BirthdayChange(e){
				this.Info.Birthday=e.detail.value;
			},
			EducationChange(e){
				this.Info.Education=this.EducationList[e.detail.value];
			},
			RPartyChange(e){
				this.Info.RParty=this.RPartyList[e.detail.value];
			},
			RIsOnlineChange(e){
				this.Info.RIsOnline=this.RIsOnlineList[e.detail.value].ID;
			},
			RLivePlaceChange(e){
				this.Info.RLivePlaceProvinceID=e.value.ProvinceID;
				this.Info.RLivePlaceCityID=e.value.CityID;
				this.Info.RLivePlaceAreaID=e.value.AreaID;
				this.Info.RLivePlace= e.value.CityName + e.value.AreaName;
			},
			Find_UserDetail(){
				var data = {};
				data.Act="Find_UserDetail";
				this.Util.Loading("请稍候...");
				this.Util.Post(data, json=>{
					uni.stopPullDownRefresh();
					this.Util.HideLoading();
					this.Info=json.Data.Info;
					this.EducationList = this.EducationList.concat(json.Data.EducationList);
					if(this.Info.RLivePlaceCityID==0){
						this.Init_Position();
					}else{
						this.Show=true;
					}
				});
			},
			Init_Position(){
				uni.getLocation({
				  type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
				  success: res=> {				    
					var data = {};
					data.Lat = res.latitude; // 纬度，浮点数，范围为90 ~ -90
					data.Lng = res.longitude; // 经度，浮点数，范围为180 ~ -180。
					// data.Lat=29.724063; //测试重庆
					// data.Lng=106.640501; 
					data.Act="Init_Position";
					this.Util.Post(data, json=>{
						this.Show=true;
						this.Info.RLivePlaceAreaID=json.Data.AreaID;
						this.Info.RLivePlaceCityID=json.Data.CityID;
						this.Info.RLivePlaceProvinceID=json.Data.ProvinceID;						
					});
				  },
				  fail: res=> {
				  	 this.Show=true;
				  }
				});				
			},
			
			OpenAddress(){
				uni.chooseLocation({
					success:res=> {
						this.Info.RLat=res.latitude;
						this.Info.RLng=res.longitude;
						this.Info.RLiveName=res.name;
						this.Info.RLiveAddress=res.address;						
					}
				});
			},
			ChooseHeadImg() {
				uni.chooseImage({
					count: 1, // 默认20
					sizeType: ['original'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
					success: res=> {
						this.Util.Loading("正在压缩，请稍候...");
						uni.compressImage({
						  src: res.tempFilePaths[0],
						  quality: 100, // 可以根据需要调整质量参数来控制压缩比例和图片质量
						  success: json=>{
							this.Util.HideLoading();
							uni.navigateTo({
								url:'/pages/login/cover?Path='+json.tempFilePath
							})
						  }
						});
					}
				});
			},
			ChooseIDCardA() {
				uni.chooseImage({
					count: 1, // 默认20
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
					success: res=> {
						uni.compressImage({
						  src: res.tempFilePaths[0],
						  quality: 100, // 可以根据需要调整质量参数来控制压缩比例和图片质量
						  success:json=> {
							this.Info.IDCardA = json.tempFilePath;
							this.CheckIDCardA();
						  }
						});
					}
				});
			},
			ChooseIDCardB() {
				uni.chooseImage({
					count: 1, // 默认20
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
					success: res=> {
						uni.compressImage({
						  src: res.tempFilePaths[0],
						  quality: 100, // 可以根据需要调整质量参数来控制压缩比例和图片质量
						  success:json=> {
							this.Info.IDCardB = json.tempFilePath;
						  }
						});
					}
				});
			},
			FinishHeadImg(HeadImg){
				this.Info.HeadImg = HeadImg;
			},
			CheckIDCardA(){
				this.Util.Loading("正在识别..."); 
				this.Util.OneUpload(this.Info.IDCardA, "upload_file_n", json=>{
					this.Util.HideLoading();
					if(json.State){
						this.Info.IDCardA = json.Data.Path;
						this.Info.RealName = json.Data.RealName;
						this.Info.IDCard = json.Data.IDCard;
						this.Info.Birthday = json.Data.Birthday;
						this.Util.Toast(json.Msg);
					}else{
						this.Util.Alert(json.Msg);
					}
				});
			},
			formSubmit(e){
				var data = this.Util.ClearForm(e.detail.value);
				data.Act="Apply_Matcher";
				data.Flag=this.Flag;
				if(this.Info.HeadImg=="" || this.Info.HeadImg.indexOf("headimg.png")>-1){
					this.Util.Toast("请上传头像");
					return;
				}
				if(data.NickName.trim()==""){
					this.Util.Toast("请填写昵称");
					return;
				}
				if(data.NickName.FormLength()>10){
					this.Util.Toast("昵称最多输入5个汉字");
					return;
				}
				if(data.NickName.indexOf("红娘")>-1){
					this.Util.Toast("昵称中不能有【红娘】2字");
					return;
				}				
				if(data.RealName.FormLength()>10){
					this.Util.Toast("姓名最多输入5个汉字");
					return;
				}
				if(data.Sex.trim()=="" || data.Sex.trim()=="请选择"){
					this.Util.Toast("请选择性别");
					return;
				}				
				if(data.Mobile.trim()==""){
					this.Util.Toast("请填写手机号码");
					return;
				}
				if(!this.Validate.IsMobile(data.Mobile.trim())){
					this.Util.Toast("手机号码不正确");
					return;
				}	
				if(data.WeiXin.trim()==""){
					this.Util.Toast("请填写微信号");
					return;
				}
				if(this.Info.IDCardA==''){
					this.Util.Toast("请上传身份证正面照片");
					return;
				}
				if(this.Info.IDCardB==''){
					this.Util.Toast("请上传身份证反面照片");
					return;
				}
				if(data.RealName.trim()==""){
					this.Util.Toast("请填写姓名");
					return;
				}
				if(data.IDCard.trim()==""){
					this.Util.Toast("请填写身份证号");
					return;
				}
				if(data.Birthday.trim()==""){
					this.Util.Toast("请选择出生日期");
					return;
				}
				if(!this.Validate.IsIDCard(data.IDCard.trim())){
					this.Util.Toast("身份证号不正确");
					return;
				}
				// if(data.Education.trim()==""){
				// 	this.Util.Toast("请选择最高学历");
				// 	return;
				// }
				// if(data.WorkUnit.trim()==""){
				// 	this.Util.Toast("请填写原工作单位");
				// 	return;
				// }
				// if(data.Position.trim()==""){
				// 	this.Util.Toast("请填写职务/职称");
				// 	return;
				// }
				if(data.RIsOnline=="-1"){
					this.Util.Toast("请选择是否可接异地线上相亲");
					return;
				}
				if(data.RLivePlaceAreaID==""){
					this.Util.Toast("请选择所在地区");
					return;
				}
				
				this.Util.Loading("请稍候...");
				var Paths=[this.Info.HeadImg, this.Info.IDCardA, this.Info.IDCardB];
				this.Util.Upload(Paths,"upload_file_o",[],list=>{
					data.HeadImg=list[0];this.Info.HeadImg=list[0];
					data.IDCardA=list[1];this.Info.IDCardA=list[1];
					data.IDCardB=list[2];this.Info.IDCardB=list[2];
					this.Save(data);
				});				
			},
			Save(data){
				this.Util.Post(data, json=>{
					this.Util.HideLoading();
					if(json.State){						
						uni.navigateTo({
							url:'/pages/index/registsuccess?Role=1&Tip='+json.Msg+'&IsIdentify='+this.Info.IsIdentify
						})
					}else{
						this.Util.Alert(json.Msg);
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	form{width:100%;}
	.square{width:710rpx; margin-left:20rpx; height:auto; margin:0 auto; margin-top:20rpx; margin-bottom: 140rpx; padding:40rpx; float:left; background-color: #ffffff; opacity: 1; border-radius: 40rpx; display:flex; flex-direction: row; flex-wrap: wrap;
		.head{width:100%; min-height: 180rpx;
			.title{width:100%; height:60rpx; float:left; font-size:32rpx;}
			.upload{width:30%; height: 100rpx; float:left; image{width:100rpx; height:100rpx; border-radius: 50rpx;}}
			.upload:active{opacity: 0.6;}
			.tip{width:70%; height: 100rpx; line-height: 100rpx; font-size:30rpx; float:left; text-align: right; color:#7d7d7d;}
			
		}
		.card{width:100%; min-height: 310rpx;
			.title{width:100%; height:60rpx; margin-top:20rpx; float:left; font-size:32rpx;}
			.idcard{width:305rpx; height: 200rpx; float:left; border:1rpx solid #cdcdcd; border-radius: 20rpx; overflow: hidden; image{width:300rpx; height:200rpx;}}
			.idcard:last-child{margin-left:20rpx;}
			.idcard:active{opacity: 0.6;} 
		}
		.brief textarea{text-align: left !important; height: 160rpx; font-size:30rpx; color:#7d7d7d; padding-bottom: 10rpx;} 
		.login{width:100%; height: 80rpx; line-height: 80rpx; margin-top:50rpx; font-size:36rpx; color:#fff; background-color: #c94c36; border-radius:40rpx;}
		.cancel{width:100%; height: 120rpx; line-height: 120rpx; font-size:30rpx; text-align: center; color:#a8a8a8; background-color: transparent;}
	}
	.success{
		.headimg{width:100%; height:auto; text-align:center; margin-top:40rpx; image{width:300rpx; height:300rpx;}}
		.line{width:100%; min-height:60rpx; line-height: 60rpx; text-align: center; font-size:42rpx; padding-left:30rpx; padding-right: 30rpx;}
	}
	.error{width:710rpx; margin-left:20rpx; height:auto; margin:0 auto; border-radius: 20rpx; margin-top:20rpx; padding:20rpx; line-height: 40rpx; float:left; background-color: #fdc8d0; border:1rpx solid #fe91a1; color:#f70225; text-align: left;}
</style>
